<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
 			/* checkbox的样式 */
            .mui-checkbox input[type=checkbox]:checked:before {
                color: red;
            }
            /* checkbox的样式 */
            .mui-radio.wrong input[type=radio]:checked:before {
                color: red;
            }
		</style>
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<!--<h1 class="mui-title">导航栏</h1>-->
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<span style="color:green; font-weight: bold;" v-html="question.Type">[多选题]</span>
				<span v-html="question.Title">开办药品生产企业，必须具备的条件是（      ）。</span>
			</div>
			<ul class="mui-table-view" v-for="item in options">
				<!--<li class="mui-table-view-cell mui-media">
					<div class="mui-media-body mui-checkbox" style="min-height: 32px;">
						<label>B.具有与所生产药品相适应的厂房、设施和卫生环境</label>
						<input name="checkbox1" value="Item 4" type="checkbox" style="margin-top: -5px;">
					</div>
				</li>-->
				<li class="mui-table-view-cell mui-media" v-if="question.Type=='多选题'">
					<div class="mui-media-body mui-checkbox" style="min-height: 32px;">
						<label v-html="item.value">A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="checkbox" v-bind:value="item.name" name="checkbox1" v-model="item.checked" v-on:click="checkeditem(item)" v-bind:disabled="item.disabled" style="margin-top: -5px;">
					</div>
				</li>
				<li class="mui-table-view-cell mui-media" v-if="question.Type=='单选题'">
					<div class="mui-media-body mui-radio" style="min-height: 32px;border: solid red 0px;">
						<label v-html="item.value">A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="radio" v-bind:value="item.name" name="radio1"  v-model="item.checked" v-on:click="checkeditem(item)"  v-bind:disabled="item.disabled" style="margin-top: -5px;">
					</div>
				</li>
				<li class="mui-table-view-cell mui-media" v-if="question.Type=='判断题'">
					<div class="mui-media-body mui-radio" style="min-height: 32px;">
						<label v-html="item.value">A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="radio" v-bind:value="item.name" name="radio2" v-model="item.checked" v-on:click="checkeditem(item)" v-bind:disabled="item.disabled" style="margin-top: -5px;">
					</div>
				</li>
			</ul>
			<div class="mui-content-padded" style="visibility: visible;" id="divDetails">
				<br>
				<div class="mui-row" style="text-align: center;">---- 详情 ----</div>
				<br>
				<div class="mui-row">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<label v-html="question.Details">
					采用webView的方式来进行Tab切换，代码有点多，可以拷贝官方文档，进行局部修改，其实只要修改subpages即可，主要要和mTab中的设置要一致，否则会报告错误，因为名字错了，就无法找到文件资源，也就无法初始化了。
					</label>
				</div>
			</div>
			<div class="mui-row" style="min-height: 42px;">&nbsp;</div>	
		</div>
		<nav class="mui-bar mui-bar-tab" style="text-align: center;">
			<div class="mui-pull-left" style="margin-left: 10px;">
				<button type="button" class="mui-btn mui-btn-default" id="btnPrevious">上一题</button>
			</div>
			<div class="mui-pull" style="border: solid red 0px;">
				<span style="color:blue" id="labRight">0</span> / <span style="color: red;" id="labWrong">0</span> / <span id="labCurrent" style="color: black;">1</span> / <span id="labTotal">3200</span>
			</div>
			<div class="mui-pull-right" style="margin-right: 10px;">
				<button type="button" class="mui-btn mui-btn-default" id="btnNext">下一题</button>
			</div>
		</nav>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/app.js?v=20190611" ></script>
		<script type="text/javascript">
			mui.init()
			function getDefaultData() {
				return {
					"Id":"e8ac1cb0-b000-4508-bfb4-898830a9c993",
					"Code":"052",
					"RefItemId":"cb389d57-ffc2-461a-982f-5df678585471",
					"ItemName":"A1食品生产安全管理人员",
					"Title":"开办药品经营企业必须具备的条件是（     ）。",
					"Type":"多选题",
					"Options":"A.具有依法经过资格认定的药学技术人员\nB.具有与所经营药品相适应的营业场所、设备、仓储设施、卫生环境\nC.具有与所经营药品相适应的质量管理机构或者人员\nD.具有保证所经营药品质量的规章制度",
					"Answer":"ABD",
					"Matter":"",
					"Score":null,
					"ExamAmount":null,
					"PassAmount":null,
					"PassRate":null,
					"Details":"试题详解",
					"Remark":"",
				}
			}
			var vm = new Vue({
				el: '.mui-content',
				data: {
					rows:10,
					page:1,
					total:0,
					records:0,
					data: [], //列表信息流数据
					readIndex:0,
					question:getDefaultData(),
					options:[],
					checked:[],
					right:0,
					wrong:0,
				},
				methods:{
					resetData:function(){//重置数据
						this.$data.page=1;
						this.$data.total=0;
						this.$data.records=0;
						this.$data.data= []; //列表信息流数据
						this.$data.readIndex=0;
						this.question=getDefaultData();
						this.options=[];
						this.right = 0;
						this.wrong = 0;
						this.result = false;
					},
				}
			});
			function checkeditem(item){
				console.log("item="+JSON.stringify(item));
				if(vm.question.Type != "多选题"){
					mui.each(vm.options, function (index, item) {
						item.state = false;													
					});
				}
				item.state = !item.state;
				console.log("item.state="+item.state);
				console.log(JSON.stringify(vm.options));
				if(vm.question.Type != "多选题"){
					checkresult();
				}
			}
			function checkresult(){
				var practices = app.getPractices();
				var practice = practices[vm.question.Id];
				/*是否已检查过结果*/
				if(practice != undefined && practice.result != undefined){
					return;
				}
				var result = "";
				mui.each(vm.options, function (index, item) {
					if(item.state == true){
						result = result +""+ item.name;
					}
				});
				if(result == "")
					return;
				
				if(practices.right == undefined)
					practices.right = 0;
					
				if(practices.wrong == undefined)
					practices.wrong = 0;
				
				if(result == vm.question.Answer){
					practices.right = practices.right + 1;
				}
				else
				{
					practices.wrong = practices.wrong + 1;
				}
				mui.each(vm.options, function (index, item) {
					item.disabled = true;
				});
				if(practice == undefined)
					practice = {};
				practice.result = result;
				practices[vm.question.Id] = practice;
				app.setPractices(practices);
				
				document.getElementById("labRight").innerHTML = practices.right;
				document.getElementById("labWrong").innerHTML = practices.wrong;
				document.getElementById("divDetails").style.visibility="visible";
			}
			mui.plusReady(function(){
				var btnPrevious = document.getElementById("btnPrevious");
				btnPrevious.addEventListener('tap', function(event) {
					console.log(JSON.stringify(this.options));
					if(vm.readIndex <= 0)
					{
						mui.toast("已是首页，没有更多内容！");
						return;
					}
					var readIndex = vm.readIndex -1;
					loadContent(readIndex);
				});
				
				var btnNext = document.getElementById("btnNext");
				btnNext.addEventListener('tap', function(event) {
					/*检查结果*/
					checkresult();
					/*加载下一题*/
					loadNext();
				});
				
				var self = plus.webview.currentWebview();
				self.addEventListener("hide",function (e) {
					window.scrollTo(0, 0);
					vm.resetData();
				},false);
			});
			function loadNext(){
				console.log(JSON.stringify(this.options));
				if(vm.readIndex >= vm.data.length -1){
					if(vm.readIndex >= vm.records - 1){
						mui.toast("已是最后一页，没有更多内容！");
						return;
					}
					console.log("readIndex="+vm.readIndex + " data="+vm.data.length);
					vm.page = vm.page + 1;
					appendData();/*加载下一页数据*/
					return;
				}
				var readIndex = vm.readIndex + 1;
				loadContent(readIndex);
			}
			//监听自定义事件，获取新闻详情
			document.addEventListener('get_detail', function(event) {
//				var keyValue = event.detail.keyValue;
//				console.log("keyValue="+keyValue);
//				if(!keyValue) {
//					return;
//				}
				
				vm.question = {};
				document.getElementById("divDetails").style.visibility="hidden";
				var practices = app.getPractices();
				/*加载数据*/
				var setting = app.getSetting();
				var ajaxUrl = setting.ServerUrl +"/api/ExamQuestion/GetPageList?orderName=Code&orderType=&rows="+vm.rows+"&page="+vm.page+"&queryJson=";
				console.log(ajaxUrl);
				plus.nativeUI.showWaiting("正在加载数据，请稍候...");
				mui.ajax(ajaxUrl,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(result){
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log(JSON.stringify(result));
						if(result.ResultType != 0){
							mui.toast(result.Content);
							return;
						}
						var appendData = JSON.parse(result.AppendData);
						vm.total = appendData.total;
						vm.data = appendData.rows;
						vm.page = appendData.page;
						vm.records = appendData.records;
						document.getElementById("labTotal").innerHTML = vm.records;
						document.getElementById("labRight").innerHTML = (practices.right ==undefined)?0:practices.right;
						document.getElementById("labWrong").innerHTML = (practices.wrong == undefined)?0:practices.wrong;
						if(vm.data.length > 0)
						{
							loadContent(0);
						}
					},
					error:function(xhr,type,errorThrown){
						plus.nativeUI.closeWaiting();
						//异常处理；
						console.log(type);
						mui.toast("加载数据异常！");
					}
				});
			});
			function appendData(){
				/*加载数据*/
				var setting = app.getSetting();
				var ajaxUrl = setting.ServerUrl +"/api/ExamQuestion/GetPageList?orderName=Code&orderType=&rows="
				+vm.rows+"&page="+vm.page+"&queryJson=";
				console.log(ajaxUrl);
				plus.nativeUI.showWaiting("正在加载数据，请稍候...");
				mui.ajax(ajaxUrl,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(result){
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log("读取结果="+JSON.stringify(result));
						if(result.ResultType != 0){
							mui.toast(result.Content);
							return;
						}
						var appendData = JSON.parse(result.AppendData);
						vm.total = appendData.total;
						vm.page = appendData.page;
						vm.records = appendData.records;
						
						var rows = appendData.rows;
						for(var i=0;i<rows.length;i++){
							vm.data.push(rows[i]);
						}
						console.log("vm.data.length="+vm.data.length);
						
						var readIndex = vm.readIndex + 1;
						loadContent(readIndex);
					},
					error:function(xhr,type,errorThrown){
						plus.nativeUI.closeWaiting();
						//异常处理；
						console.log(type);
						mui.toast("加载数据异常！");
					}
				});
			}
			function loadContent(readIndex){
				vm.readIndex = readIndex;
				document.getElementById("labCurrent").innerHTML = readIndex + 1;
				console.log("readindex="+readIndex + " vm.data.length="+vm.data.length);
				vm.question = vm.data[readIndex];
				
				console.log(JSON.stringify(vm.question));
				vm.options = [];
				var options = vm.question.Options.split('\n');
				//console.log("options.length="+options.length);
				var practice = app.getPractice(vm.question.Id);
				console.log("practice="+JSON.stringify(practice));
				for(var index=0;index < options.length;index++){
					var field = options[index].split('.');
					var obj = {};
					if(field.length > 0){
						obj.name = field[0];
						obj.value = options[index];
					}
					else
					{
						obj.name = options[index];
						obj.value = options[index];
					}
					if(vm.question.Type == "多选题"){
						if(practice != undefined){
							if(practice.result == undefined){
								obj.checked = false;
							}
							else{
								var temp = practice.result.indexOf(obj.name);
								console.log("temp ="+temp)
								if(practice.result.indexOf(obj.name) >=0){
									obj.checked = true;
								}
								else
								{
									obj.checked = false;
								}
								obj.disabled = true;
							}
						}
						else
						{
							obj.checked = false;
						}
					}
					else
					{
						if(practice != undefined){
							if(practice.result == undefined){
								obj.checked = false;
							}
							else{
								var temp = practice.result == obj.name;
								console.log("temp ="+temp)
								if(practice.result == obj.name){
									obj.checked = obj.name;
								}
								else
								{
									obj.checked = false;
								}
								obj.disabled = true;
							}
						}
						else
						{
							obj.checked = false;
						}
					}
					vm.options.push(obj);
				}
				console.log(JSON.stringify(vm.options));
				/*已答时，详情可见*/
				if(practice != undefined && practice.result != undefined)
					document.getElementById("divDetails").style.visibility="visible";
				else
					document.getElementById("divDetails").style.visibility="hidden";
			}
			//重写返回逻辑
			mui.back = function() {
				var self = plus.webview.currentWebview();
				self.hide("auto", 300);
			}
		</script>
	</body>

</html>